<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>激光打印机管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
    <div>
        查询打印机：&nbsp;&nbsp;&nbsp;<el-input
            placeholder="请输入打印机编号"
            size="mini"
            style="width: 200px"
            v-model="input">
    </el-input>&nbsp;&nbsp;&nbsp;<el-button type="primary" size="mini" icon="el-icon-search" @click="selectByNum">搜索</el-button>
    </div>
    <p></p>
    <p></p>
    <el-button type="primary" @click="dialogFormVisible = true">添加打印机</el-button>
    <el-button type="danger" @click="delAll">批量删除</el-button>
    <template>
        <el-table
                ref="multipleTable"
                :data="printers"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="id"
                    width="120"
                    v-if="false">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                    label="打印机编号"
                    width="120">
                <template slot-scope="scope">{{ scope.row.pnum }}</template>
            </el-table-column>
            <el-table-column
                    prop="pserver"
                    label="服务器"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="pdescribe"
                    label="描述"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="ptype"
                    label="可打印型号"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="pip"
                    label="IP地址"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="pline"
                    label="责任产线"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="premark"
                    label="备注"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--分页-->
    <el-pagination
            background
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
    <!--添加/修改打印机的对话框-->
    <el-dialog title="添修打印机" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="printer">
            <el-form-item label="打印机编号" :label-width="formLabelWidth">
                <el-input v-model="printer.pnum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="服务器" :label-width="formLabelWidth">
                <el-input v-model="printer.pserver" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="printer.pdescribe" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="可打印型号">
                <el-select v-model="printer.ptype" placeholder="请选择">
                    <el-option label="48VASA,48VDSD" value="48VASA,48VDSD"></el-option>
                    <el-option label="64VTFT,64VFFR" value="64VTFT,64VFFR"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="IP地址" :label-width="formLabelWidth">
                <el-input v-model="printer.pip" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="责任产线" :label-width="formLabelWidth">
                <el-input v-model="printer.pline" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="printer.premark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="savePrinter">确 定</el-button>
        </div>
    </el-dialog>
    <!--删除打印机的对话框-->
    <el-dialog title="删除打印机" :visible.sync="dialogFormVisible1" @close="closeMyDialog">
        <el-form :model="printer">
            <span style="text-align: center">确定要删除此打印机吗</span>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="deletePrinter">确 定</el-button>
        </div>
    </el-dialog>
    <!--批量删除打印机的对话框-->
    <el-dialog title="删除打印机" :visible.sync="dialogFormVisible2" @close="closeMyDialog">
            <span style="text-align: center">确定要删除这些打印机吗</span>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="deletePrinters">确 定</el-button>
        </div>
    </el-dialog>
</div>
<!-- 引入组件库 -->
<script src="/qs/qs.min.js"></script>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                total: 0,//总条数
                current: 0,//当前页数
                pageSize: 0, //每页条数
                printers:null,
                multipleSelection: [],
                input:'',
                printer:{
                    //角色对话框的数据
                    id: '',
                    pnum: '',
                    pserver: '',
                    pdescribe: '',
                    ptype: '',
                    pip: '',
                    pline: '',
                    premark: ''
                },
                dialogFormVisible: false,//控制对话框的显示
                dialogFormVisible1: false,//控制对话框的显示
                formLabelWidth: '120px',//表单标签的宽度
                dialogFormVisible2:false,
                delarr:[]//删除的id数组
            }
        },
        methods: {
            //当前页跳转的方法
            loadPage(current) {
                this.current = current;
                //查询商品
                axios.get("/printers?current=" + current).then(value => {
                        if (value.data.state == 1) {
                            this.printers = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    },
                )},
            //关闭对话框
            closeMyDialog(){
                //清空数据
                this.printer = {      //产品对话框的数据
                    id: '',
                    pnum: '',
                    pserver: '',
                    pdescribe: '',
                    ptype: '',
                    pip: '',
                    pline: '',
                    premark: ''
                }
            },
            //显示修改打印机的对话框
            handleEdit(index, row) {
                this.printer = row;
                this.dialogFormVisible = true;
            },
            //添加/修改打印机
            savePrinter(){
                if(this.printer.id==''){
                    axios.post("/printer",{
                        pnum:this.printer.pnum,
                        pserver:this.printer.pserver,
                        pdescribe:this.printer.pdescribe,
                        ptype:this.printer.ptype,
                        pip:this.printer.pip,
                        pline:this.printer.pline,
                        premark:this.printer.premark
                    }).then(value => {
                        if(value.data.state==1) {
                            this.loadPage(1)
                        }
                    })
                }else {
                    axios.put("/printer",{
                        id:this.printer.id,
                        pnum:this.printer.pnum,
                        pserver:this.printer.pserver,
                        pdescribe:this.printer.pdescribe,
                        ptype:this.printer.ptype,
                        pip:this.printer.pip,
                        pline:this.printer.pline,
                        premark:this.printer.premark
                    }).then(value => {
                        if(value.data.state==1) {
                            this.loadPage(1)
                        }
                    })
                }
                this.dialogFormVisible = false;
            },
            handleDelete(index, row) {
                this.printer = row;
                this.dialogFormVisible1 = true;
            },
            //单个删除打印机
            deletePrinter(){
                axios.delete("/printer/"+this.printer.id).then(value => {
                    if (value.data.state==1){
                        this.loadPage(1)
                    }
                }),
                    this.dialogFormVisible1 = false;
            },
            //按编号查询打印机
            selectByNum(pnum){
                pnum=this.input;
                if (pnum!=''){
                    axios.get("/printers/pnum?pnum="+pnum,{
                    }).then(value => {
                        if(value.data.state==1) {
                            this.printers = value.data.data;
                        }
                    })
                }else {
                    this.loadPage(1)
                }
          },
            //选中哪些
            handleSelectionChange(val) {
                this.multipleSelection = val;

            },
            open1() {
                this.$alert('请选择需要删除的订单编号', '提示', {
                    confirmButtonText: '确定',
                });
            },
            //添加删除的id数组
            delAll() {
                const length = this.multipleSelection.length;
                if(length!=0){
                    this.dialogFormVisible2 = true;//显示删除弹框
                    for (let i = 0; i < length; i++) {
                        this.delarr.push(this.multipleSelection[i].id)
                    }
                }else {
                    this.open1();
                }

            },
            //批量删除
            deletePrinters(arrs){
                arrs=this.delarr;
                axios.delete("/printers?ids="+arrs).then(value => {
                    if (value.data.state==1){
                        this.loadPage(1)
                    }
                }),
                    this.dialogFormVisible2 = false;
            },
            },

        mounted(){
            this.loadPage(1)
        }
    })
</script>

</body>
</html>